import React,{Component} from 'react';

import { Button, Icon } from 'antd';

import PropTypes from 'prop-types';

import './Upload.css';

export default class Upload extends Component{
    
    constructor(props){
        super(props)
        this.state = {
            imgList:[]
        }
    }

    handler(){
        function trigger(ele){
            if(document.all) {
                ele.click();
            }else {
                var e = document.createEvent("MouseEvents");
                e.initEvent("click", true, true);　
                ele.dispatchEvent(e);
                }   
        }

        var ele = this.refs.upload;
        trigger(ele);
        
    }

    changeHandler(){
        // var container = this.refs.container;
        var upload = this.refs.upload;
        var files = upload.files;

        console.log(files)

        var imgList = this.state.imgList;
        for(var i = 0; i < files.length;i++){
            var url = window.URL.createObjectURL(files[i]); 
            imgList.push(<img  src={url}  key={url}/>)
            // var img = document.createElement('img');
            // img.src = url;
            // container.appendChild(img);
        }
        console.log(imgList)
        this.setState({
            imgList:imgList
        })

    }

    render(){
       return(
        <div>
            <input type='file' name="img" ref="upload"  style={{display:"none"}}  onChange={this.changeHandler.bind(this)}/>
            <Button style={{border:"none",fontSize:"18px"}}  onClick={this.handler.bind(this)}>
                <Icon type="picture" style={{color:"rgb(29, 161, 242)",fontSize:"30px"}}/>
            </Button>
        <div ref="container"  className="preview-container">
            {this.state.imgList}
        </div>
        </div>
        
       )
    }
}

// Upload.propTypes = {
//     container: PropTypes.element
// };